{% extends 'base.html' %}
{% block page-content %}

    <div class="container">
        <div class="row" style="margin-top: 20px">
            <div class="col-xs-12">
                <div class="panel panel-green">
                    <div class="panel-heading">用户信息</div>
                    <div class="panel-body pan">
                        <form class="form-horizontal" role="form" enctype="multipart/form-data" id="uploadUser"
                              v-if="dataItem!=null">
                            <!-- #section:elements.form -->
                            <input type="text" placeholder="" class="col-xs-10 col-sm-5 hidden" name="id"
                                   value="{{ id }}"/>
                            <div class="form-body pal">
                                <div class="form-group">
                                    <label for="inputUsername" class="col-md-3 control-label">用户名
                                    </label>
                                    <div class="col-md-9">
                                        <div class="input-icon"><i class="fa fa-user"></i>
                                            <input type="text" placeholder="" class="col-xs-10 col-sm-5" name="username"
                                                   v-model="dataItem.username"/>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="inputEmail" class="col-md-3 control-label">邮箱
                                    </label>
                                    <div class="col-md-9">

                                        <input type="text" placeholder="" class="col-xs-10 col-sm-5" name="email"
                                               v-model="dataItem.email"/>

                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="inputAddress" class="col-md-3 control-label">手机号码
                                    </label>
                                    <div class="col-md-9">
                                        <div class="input-icon right">
                                            <input type="text" placeholder="" class="col-xs-10 col-sm-5" name="phone"
                                                   v-model="dataItem.phone"/>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group mbn">
                                    <label for="inputContent" class="col-md-3 control-label">登录密码</label>
                                    <div class="col-md-9">
                                        <input type="password" placeholder="" class="col-xs-10 col-sm-5" name="psd"
                                               v-model="psd"/>
                                    </div>
                                </div>
                                <div class="form-group" style="margin-top: 20px">
                                    <label class="col-sm-3 control-label no-padding-right" for="form-field-1">
                                        头像 </label>

                                    <div class="col-md-6">
                                        <a href="javascript:sfzzmSc();" class="grids-item">
                                            <div id="sfzzmImg" class="grids-icon">
                                                <img style="width: 300px"
                                                     :src="dataItem.img">
                                            </div>
                                            <div class="grids-txt">
                                                <span>效果图</span>
                                            </div>
                                        </a> <input style="display: none" name="pic" id="sfzzm" type="file"
                                                    onchange="javascript:showpic(this,'sfzzm');"
                                                    accept="image/*"
                                                    multiple/>
                                    </div>
                                </div>
                            </div>
                            <div class="form-actions">
                                <div class="col-md-offset-3 col-md-9">
                                    <button type="button" class="btn btn-primary" @click="commitUserInfo">保存</button>&nbsp;
                                    <button type="button" class="btn btn-green"  @click="goback">返回</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}


{% block page-scripts %}

    <script>
        var vm = new Vue({
            el: '#app',
            // 分割符: 修改vue中显示数据的语法, 防止与django冲突
            delimiters: ['[[', ']]'],
            components: {},
            data: {
                name: "",
                nums: 0,
                price: 0,
                description: "",
                dataItem: null,
                psd: "123456"
            },
            created() {
                this.getData();
            },
            methods: {
                async getData() {
                    //获取交流主记录
                    let data = {id: {{id}}};
                    let res = await axiosget("{% url 'userinfodata' %}", data);
                    console.log(res);
                    if (res.code == 200) {
                        this.dataItem = res.data.items;
                    }
                },
                async commitUserInfo() {
                    var data = new FormData($('#uploadUser')[0]);
                    var xhr = new XMLHttpRequest();
                    xhr.upload.addEventListener('progress', this.on_progress, false);     //xhr对象含有一个upload对象，它有一个progress事件，在文件上传过程中会被不断触发，我们为这个事件对应一个处理函数，每当事件触发就会调用这个函数，于是便可利用这个函数来修改当前进度，更多细节可自行查询
                    xhr.open('POST', "{% url 'userinfodata' %}", true);  //请将url改成上传url
                    xhr.setRequestHeader('X-CSRFTOKEN', '{{ request.COOKIES.csrftoken }}');   //此处为Django要求，可无视，或者换成相应后台所要求的CSRF防护，不是django用户请去掉
                    xhr.send(data);   //发送表单
                    xhr.onreadystatechange = () => {
                        if (xhr.readyState == 4 || xhr.readyState == "complete") {
                            //跳转详情页面
                            window.location.href = "{% url 'index'  %}";
                        }
                    }
                },
                on_progress(evt) {       //看这个函数之前先看upload函数。这个函数可以接收一个evt(event)对象(细节自行查询progress)，他有3个属性lengthComputable，loaded，total，第一个属性是个bool类型的，代表是否支持，第二个代表当前上传的大小，第三个为总的大小，由此便可以计算出实时上传的百分比
                    if (evt.lengthComputable) {
                        var percent = Math.round((evt.loaded) * 100 / evt.total);
                        console.log(percent);
                        if (percent == 100) {
                            percent = 99;
                        }
                    }
                },
                goback()
                {
                    window.history.back(-1);
                }
            },
            computed: {
                // 计算属性的 getter
            }
        });

        function sfzzmSc() {//点击触发h5File类型上
            $("#sfzzm").click();
        }

        function showpic(obj, id) {//图片展示
            //var imgs = document.getElementById("sfzzmImg").getElementsByTagName("img");
            for (var i = 0, file; file = obj.files[i]; i++) {
                if (i > 0) {
                    break;
                }
                const size200k = file.size / 1024 < 500;
                if (!size200k) {
                    console.log("图片超过500k");
                    $('#modal-alert99').modal('show');
                    $("#" + id).val("");
                    return false;
                }
                var reader = new FileReader();
                reader.onload = function (e) {//图片读取展示
                    console.log(e);
                    var htmlimg = '<img  style="margin-left:2px;width:300px; " id="' + e.timeStamp + '" class="min"  src="' + e.target.result + '" onclick="showBigPic(this)"/>';
                    $("#" + id + "Img").html(htmlimg);
                };
                reader.readAsDataURL(file);

            }
        }
    </script>
{% endblock %}

{% block page-styles %}
    <style>
        form {
            font-size: 12pt;
        }
    </style>
{% endblock %}